<template>
  <div class="mine">
    <film-header></film-header>
    <div class="text">
      <form  action="#">
        <p><input type="text" placeholder="账号/手机号/邮箱" name="username"></p>
        <p><input type="password" placeholder="请输入您的密码" name="pwd"></p>
        <p><input type="submit" value="登录"></p>
      </form>
      <p>
        <span>
          <a href="#">立即注册</a>
        </span>
        <span>
          <a href="#">找回密码</a>
        </span>
      </p>
    </div> 

    <film-footer></film-footer>
  </div>
</template>

<script>
import FilmHeader from '../components/filmHeader.vue'
import FilmFooter from '../components/filmFooter.vue'
export default {
    name:'my-mine',
  components: {
    FilmHeader,FilmFooter
  }
}
</script>

<style scoped>
  .mine .text{
    margin-top:50px;
  }
  .mine .text input{
    width:100%;
    height:50px;
    border:0;
    border-bottom:1px solid gray;
    outline:none;
  }
  .mine .text P:nth-child(3) input{
    background:#e54847;
    color:white;
    border:0;
    margin:0 auto;
    margin-top:10px;
    border-radius:5px;
  }
  .mine .text P:nth-child(3){
     width:98%;
     margin:0 auto;
  }
  .mine .text>p{
    margin-top:10px;
    display:flex;
    justify-content: space-between;
  }
  a{
    text-decoration: none;
    color:#e54847;
  }
</style>